<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            height: 60px;
            background: #6f9ece;
            border-bottom: 1px solid blue;
            position: relative;
        }
        .header h2{
            margin-left: 100px;
            line-height: 60px;
        }
        .header .username{
            display: flex;
            position: absolute;
            top: 20px;
            right: 200px;
        }
        .header .username h4{
            line-height: 35px;
        }
        .header .username button{
            height: 30px;
            width: 80px;
            margin-left: 20px;
            background: rgba(255,255,255,0.5);
            border: none;
            border-radius: 10px;
        }
        .main{
            height: 720px;
            display: flex;

        }
        .main .left{
            width: 14%;
            height: 720px;
            background: #6f9ece;
        }
        .main .left ul{
            list-style-type: none;
            text-align: center;
        }
        .main .left ul li{
            height: 60px;
            line-height: 60px;
            border-bottom: 1px solid white;
        }
        .main .left ul li a{
            text-decoration: none;
            font-size: 18px;
        }
        .main .right{
            width: 86%;
        }
        .main .right .right_area{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 718px;
        }
    </style>
</head>
<body>
<div>
    <div class="header">
        <h2>信息后台系统</h2>
        <div class="username" ><h4>欢迎：<span id="uname"></span></h4>
            <button onclick="logou()">
                退出登录
            </button>
        </div>
    </div>
    <div class="main">
        <div class="left">
            <ul>
                <li><a href="productInfo.html" target="right_area">员工信息2</a></li>
<!--                <li><a href="richTextCompiler.html" target="right_area">富文本编辑器</a></li>-->
<!--                <li><a href="dept.html" target="right_area">部门信息</a></li>-->
            </ul>
        </div>
        <div class="right">
            <iframe name="right_area" id="right_area" class="right_area" src="userInfo.html"  frameborder="0"></iframe>
        </div>
    </div>
</div>
<script>
    function logou(){
        fetch('/user/logout')
            .then(response => response.text())
            .then(data=>{
                if (data=="true"){
                    location.href="../login.html"
                } else {
                    alert("退出登录失败")
                }
            })
            .catch(error => console.error('Error during logout:', error));
    }
    $(function (){
        $.ajax({
            type:"post",
            url:"/user/getUsername",
            success:function (res){
                let user = res
                if (user=="") {
                    location.href="../login.html"
                }
                else {
                    console.log(res)
                    $("#uname").text(res.username)
                }
            }
        })
    })
</script>
</body>
</html>
